<blockquote class='quote-from-book'>	<p><span class='ic'>“</span>Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase.”</p>
 </blockquote>
	<p>The most common addition of vertical space on a webpage is that inserted between paragraphs. If the rhythm of the page is to be maintained, the spacing of paragraphs should be related to the basic leading. For example, the text on this page is set at 12&nbsp;px with a <code>line-height</code> of 1.5&nbsp;em, making each line 18&nbsp;px in height. In order to keep the rhythm of the text, the vertical spacing between blocks should also be 18&nbsp;px. This is achieved by setting top- and bottom-margins equal to the line&nbsp;height.</p>

<pre><code>p {
  line-height: 1.5;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}</code></pre>

	<p>It should be noted that the default treatment by web browsers of paragraphs <span class='bracket'>(</span>and other block level elements such as blockquotes and lists<span class='bracket'>)</span>  is to insert a top- and bottom-margin of 1&nbsp;em. The implication is that margins must always be specified by the&nbsp;designer.</p>

	<h2>Variations in text&nbsp;size</h2>

	<p>When there is a change in text size, perhaps with a heading or sidenotes, the differing text should take up a multiple of the basic leading. As stated earlier, each line on this page is 18&nbsp;px in height. This means that every diversion from the basic text size should take up multiples of 18&nbsp;px. This can be accomplished by adjusting the <code>line-height</code> and <code>margin</code>&nbsp;accordingly.</p>

	<h2>Headings</h2>

	<p>The subheadings on this page are set to 14&nbsp;px. In order that the height of each line is 18&nbsp;px, the <code>line-height</code> should be set to 18&nbsp;&divide;&nbsp;14 =&nbsp;1.286. Similarly the margins above and below the heading must be adjusted. The temptation is to set heading margins to a simple 1&nbsp;em, or leave them at the browser default, but this would usually result in breaking the rhythm of the text. In the case of this page, the top and bottom margins are the same size and equal to a full line, so they too should be set at&nbsp;1.286&nbsp;em.</p>

<pre><code>h2 {
  line-height: 1.286;
  margin-top: 1.286em;
  margin-bottom: 1.286em;
}</code></pre>

	<p>One can also set asymmetrical margins for headings, provided the margins combine to be multiples of the basic line height. For example, a top margin of 1&frac12; lines could be combined with a bottom margin of half a line as&nbsp;follows:</p>

	<p class='imgholder'><img src="/i/2-2-2i.png" alt="Diagram of text showing how the basic leading is retained with a heading and asymmetrical margins" /></p>

<pre><code>h2 {
  line-height: 1.286;
  margin-top: 1.929em;
  margin-bottom: 0.643em;
}</code></pre>

	<p>By way of a further example, the main heading of the page you are reading has a text size of 18&nbsp;px, therefore the <code>line-height</code> is set to 1&nbsp;em, as are the&nbsp;margins.</p>

	<h2>Sidenotes</h2>

	<p>Sidenotes <span class='bracket'>(</span>and footnotes for that matter<span class='bracket'>)</span> are often set at a smaller size to the basic text. This smaller text should still form a rhythm with the basic text, so a calculation similar to that of headings, is required. Consider the following&nbsp;example:</p>

	<div class="ex2-2-2"><p class="basictext">Daniel is roused by a rooster on the forecastle* deck that is growing certain it’s not just imagining the light in the eastern sky. Unfortunately the eastern light is off to port this morning. Yesterday it was to starboard. Minerva has been sailing up and down the New England coast for the better part of a fortnight, trying to catch a wind that will decisively take her out into the deep water.</p><p class="sidenote">The forecastledeck is the short deck that, towards the ship’s bow, is built above the upperdeck.</p></div>

	<p>The main body text again has a text size of 12&nbsp;px and a line height of 18&nbsp;px. The sidenotes are set at 10&nbsp;px and so their line-height must be increased to 18&nbsp;&divide;&nbsp;10 =&nbsp;1.8.</p>

	<h2>Images</h2>

	<p>On the Web, images in sidebars and within the main body of text are almost always guilty of disrupting the rhythm of text. The same rules should be applied to images as to headings: any image and associated caption should take up multiples of the basic line height. For example the image on this page demonstrating asymmetrical headings is 180&nbsp;px tall – precisely 10&nbsp;lines in height. </p>

	<p>Clearly problems would arise when the basic text size changes, for example if a reader changes their default text size. In this situation, if the image is left at its natural size, or has a specific size set in pixels, the image would no longer take up a multiple of the basic line height. This could be avoided if the image is sized in ems rather than pixels. For example, the aforementioned image could be given a <code>height</code> of 180&nbsp;&divide;&nbsp;12 =&nbsp;15&nbsp;em <span class='bracket'>(</span>12&nbsp;px being the text&nbsp;size<span class='bracket'>)</span>.</p>

	<p>Sizing images in ems rather than pixels means that they scale up and down with the text size. It is acknowledged, however that this will result in some loss of image quality which may or may not be acceptable. The alternative is to keep the images sized in pixels, and accept that the small proportion of readers who resize their default text size will receive a sub-optimal reading&nbsp;experience.</p>
 